<template>
	<view class="tab-bar">
		<div class="center-shadow"></div>
		<div class="shadow2"></div>
		<view v-for="(item, index) in list" :key="item.pagePath"
			:class="[item.isCenter ? 'tab-bar-item-center' : 'tab-bar-item']" @click="switchTab(item, index)">
			<image v-if="item.selectedIconPath" class="tab_img"
				:src="selected === index ? item.selectedIconPath : item.iconPath"></image>
			<view v-if="item.text" :class="[item.isCenter ? 'center' : 'tab_text']"
				:style="{ color: selected === index ? selectedColor : color }">
				<span>{{ item.text }}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "xlTabBar",
		props: {
			selected: {
				// 当前选中的tab index
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				color: "#333333",
				selectedColor: "#ff8822",
				list: [{
						pagePath: "/pages/index",
						iconPath: "/static/images/tabbar/home_s.png",
						selectedIconPath: "/static/images/tabbar/home.png",
						text: "首页",
						isCenter: false,
					},
					{
						pagePath: "/pages2/login",
						iconPath: "/static/images/tabbar/fabu.png",
						selectedIconPath: "/static/images/tabbar/fabu.png",
						text: "",
						isCenter: true,
					},
					{
						pagePath: "/pages/mine",
						iconPath: "/static/images/tabbar/mine.png",
						selectedIconPath: "/static/images/tabbar/mine_s.png",
						text: "我的",
						isCenter: false,
					},
				],
			};
		},
		methods: {
			switchTab(item, index) {
				
				// #ifdef MP-WEIXIN || H5
				this.$throttle(() => {
					console.log("点击了tabbar1")
					if (item.isCenter) {
						this.$emit("clickcenter");
						return false;
					}
					this.$emit("click", index);
				});
				// #endif
				
				// #ifdef APP-PLUS
				
				if (item.isCenter) {
					console.log("点击了发布需求",this.$emit)
					uni.$emit("clickcenter");
					return false;
				}
				console.log("点击了我的",index,this.$emit)
				uni.$emit("clickMy", index);
				// #endif


				// uni.switchTab({
				//   url: item.pagePath,
				// });
			},
		},
	};
</script>

<style scoped lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		// height: 6.375rem;
		background: white;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		box-shadow: 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.05);
		z-index: 999;
		justify-content: space-between;

		.center-shadow {
			position: absolute;
			left: 50%;
			top: -40%;
			transform: translate(-50%);
			width: 70px;
			height: 70px;
			padding: 0.3125rem;
			background: #ffffff;
			border-radius: 50% 50% 0 0;
			box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.05);
			z-index: -999;
		}

		.shadow2 {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background: #fff;
			z-index: 1000;
		}

		.tab-bar-item-center {
			position: absolute;
			left: 50%;
			top: -20%;
			transform: translate(-50%);
			height: 3.125rem;
			z-index: 9999;
			background: #ffffff;

			.tab_img {
				position: absolute;
				top: -20.2px;
				left: -30px;
				width: 62px;
				height: 76.2px;
			}

			.center {
				width: 3.125rem;
				height: 3.125rem;
				background: #ff8822;
				border-radius: 50%;
				opacity: 1;
				font-size: 0.875rem;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				line-height: 0.875rem;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: space-around;

				._span {
					display: inline-block;
					width: 2.1875rem;
					letter-spacing: 0.125rem;
					line-height: 1.0625rem;
					color: #ffffff;
					font-weight: 600;
					margin-top: 0.3125rem;
					font-size: 0.875rem;
				}
			}
		}

		.tab-bar-item {
			z-index: 999;
			// flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 33.33%;
			height: 3.125rem;
			background: #ffffff;

			.tab_img {
				width: 1.625rem;
				height: 1.625rem;
			}

			.tab_text {
				font-size: 0.625rem;
				line-height: 0.875rem;
				margin-top: 0.0625rem;
				letter-spacing: 0.0175rem;
				opacity: 1;
			}
		}
	}
</style>